<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="ajax get方式" onclick="ajaxGet()"/><br/>
	<input type="button" value="ajax post方式" onclick="ajaxPost()"/><br/>
	<input type="button" value="ajax 方式" onclick="ajax()"/><br/>
	
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		function ajaxGet() {
			// $.get(url, [data], [callback], [type])
			$.get(
				"${pageContext.request.contextPath}/ajax", //url：代表请求的服务器端地址
				{"name":"zhangsan"},					   // data：代表请求服务器端的数据,以json格式
				function(data) {                           // callback：表示服务器端成功响应后所触发的函数
					// {"name":"李四","age":23}
					console.log("name: " + data.name + ", age: " + data.age);
				},
				"json"                                    //type：表示服务器端返回的参数的数据类型  
			);
		}
		
		function ajaxPost() {
			// $.get(url, [data], [callback], [type])
			$.post(
				"${pageContext.request.contextPath}/ajax", //url：代表请求的服务器端地址
				{"name":"zhangsan"},					   // data：代表请求服务器端的数据,以json格式
				function(data) {                           // callback：表示服务器端成功响应后所触发的函数
					// {"name":"李四","age":23}
					console.log("name: " + data.name + ", age: " + data.age);
				},
				"json"                                    //type：表示服务器端返回的参数的数据类型  
			);
		}
		
		function ajax() {
			$.ajax({
				url : "${pageContext.request.contextPath}/ajax", // url：请求服务器端地址
				async : true, // 可以不写，默认就是true，代表异步
				data : {"name" : "王五", "age" : 40}, // 发送到服务器的参数，建议使用json格式
				success : function(data) {           //成功响应执行的函数，对应的类型是function类型
					// {"name":"李四","age":23}
					console.log("name: " + data.name + ", age: " + data.age);
				},
				dataType : "json",
				type : "POST"
			});
		}
	</script>
	
	
	
	
	
	
</body>
</html>